import React, { useState } from 'react';
import { Card, Button, Upload, message, Slider, Row, Col } from 'antd';
import type { UploadProps } from 'antd';
import { InboxOutlined } from '@ant-design/icons';

const { Dragger } = Upload;

const LosslessImageEditing: React.FC = () => {
  const [imageUrl, setImageUrl] = useState<string>('');
  const [editedImageUrl, setEditedImageUrl] = useState<string>('');
  const [brightness, setBrightness] = useState<number>(50);
  const [contrast, setContrast] = useState<number>(50);
  const [saturation, setSaturation] = useState<number>(50);
  const [sharpness, setSharpness] = useState<number>(50);
  const [loading, setLoading] = useState<boolean>(false);

  const uploadProps: UploadProps = {
    name: 'file',
    multiple: false,
    action: '/api/upload',
    onChange(info) {
      const { status } = info.file;
      if (status === 'done') {
        message.success(`${info.file.name} 文件上传成功`);
        const fileUrl = URL.createObjectURL(info.file.originFileObj as File);
        setImageUrl(fileUrl);
        setEditedImageUrl(''); // 重置编辑结果
        // 重置参数
        setBrightness(50);
        setContrast(50);
        setSaturation(50);
        setSharpness(50);
      } else if (status === 'error') {
        message.error(`${info.file.name} 文件上传失败`);
      }
    },
    onDrop(e) {
      console.log('Dropped files', e.dataTransfer.files);
    },
  };

  const handleReset = () => {
    setBrightness(50);
    setContrast(50);
    setSaturation(50);
    setSharpness(50);
    setEditedImageUrl(''); // 清除编辑结果
  };

  const handleApply = () => {
    if (!imageUrl) {
      message.warning('请先上传图片');
      return;
    }

    setLoading(true);
    // 模拟AI无损调图过程
    setTimeout(() => {
      message.success('无损调图完成');
      // 在实际应用中，这里会使用AI处理后的图片URL
      setEditedImageUrl(imageUrl);
      setLoading(false);
    }, 2000);
  };

  const handleDownload = () => {
    if (!editedImageUrl) {
      message.warning('请先应用调整');
      return;
    }
    message.info('开始下载调整后的图片');
    // 实际应用中，这里会实现图片下载功能
  };

  return (
    <div className="p-4">
      <h2 className="text-xl font-bold mb-4">无损调图</h2>
      <Card title="上传图片" className="mb-4">
        <Dragger {...uploadProps}>
          <p className="ant-upload-drag-icon">
            <InboxOutlined />
          </p>
          <p className="ant-upload-text">点击或拖拽文件到此区域上传</p>
          <p className="ant-upload-hint">
            支持单个图片文件上传，系统将智能保持图片质量进行调整
          </p>
        </Dragger>
      </Card>

      {imageUrl && (
        <Row gutter={[16, 16]}>
          <Col span={24} md={12}>
            <Card title="原图预览" className="mb-4">
              <div className="flex justify-center">
                <img 
                  src={imageUrl} 
                  alt="原图" 
                  className="max-w-full max-h-[400px]" style={{ 
                maxWidth: '100vw', 
                maxHeight: '60vh',
                margin: '0 auto'
              }}
                />
              </div>
            </Card>
          </Col>
          <Col span={24} md={12}>
            <Card title="参数调整" className="mb-4">
              <div className="mb-4">
                <div className="flex justify-between mb-1">
                  <span>亮度</span>
                  <span>{brightness}</span>
                </div>
                <Slider
                  min={0}
                  max={100}
                  value={brightness}
                  onChange={setBrightness}
                />
              </div>
              
              <div className="mb-4">
                <div className="flex justify-between mb-1">
                  <span>对比度</span>
                  <span>{contrast}</span>
                </div>
                <Slider
                  min={0}
                  max={100}
                  value={contrast}
                  onChange={setContrast}
                />
              </div>
              
              <div className="mb-4">
                <div className="flex justify-between mb-1">
                  <span>饱和度</span>
                  <span>{saturation}</span>
                </div>
                <Slider
                  min={0}
                  max={100}
                  value={saturation}
                  onChange={setSaturation}
                />
              </div>
              
              <div className="mb-4">
                <div className="flex justify-between mb-1">
                  <span>锐度</span>
                  <span>{sharpness}</span>
                </div>
                <Slider
                  min={0}
                  max={100}
                  value={sharpness}
                  onChange={setSharpness}
                />
              </div>
              
              <div className="flex space-x-2">
                <Button onClick={handleReset} style={{ flex: 1 }}>重置</Button>
                <Button type="primary" onClick={handleApply} loading={loading} style={{ flex: 1 }}>
                  应用调整
                </Button>
              </div>
            </Card>
          </Col>
        </Row>
      )}

      {editedImageUrl && !loading && (
        <Card title="调整结果">
          <div className="flex justify-center">
            <img 
              src={editedImageUrl} 
              alt="无损调图结果" 
              className="max-w-full max-h-[500px]" style={{ 
                maxWidth: '100vw', 
                maxHeight: '60vh',
                margin: '0 auto'
              }}
            />
          </div>
          <div className="flex justify-center mt-4 space-x-4">
            <Button>对比原图</Button>
            <Button type="primary" onClick={handleDownload}>下载调整后图片</Button>
            <Button>保存为预设</Button>
          </div>
        </Card>
      )}

      <div className="text-sm text-gray-500 mt-4">
        <p>• 无损调图不会降低图片质量，适合专业摄影后期处理</p>
        <p>• 建议调整参数后观察效果，适度调整以获得最佳视觉体验</p>
        <p>• 系统会自动保留图片的EXIF信息和元数据</p>
      </div>
    </div>
  );
};

export default LosslessImageEditing;